import { defineStore } from 'pinia'
import { ref, computed, watch } from 'vue'

export type ThemeMode = 'light' | 'dark' | 'auto'

export interface ThemeConfig {
  mode: ThemeMode
  primaryColor: string
  borderRadius: string
  fontSize: string
}

export const useThemeStore = defineStore('theme', () => {
  // 状态
  const themeMode = ref<ThemeMode>('auto')
  const primaryColor = ref('#409EFF')
  const borderRadius = ref('8px')
  const fontSize = ref('16px')

  // 计算属性
  const isDarkMode = computed(() => {
    if (themeMode.value === 'auto') {
      return window.matchMedia('(prefers-color-scheme: dark)').matches
    }
    return themeMode.value === 'dark'
  })

  const currentTheme = computed<ThemeConfig>(() => ({
    mode: themeMode.value,
    primaryColor: primaryColor.value,
    borderRadius: borderRadius.value,
    fontSize: fontSize.value
  }))

  // 方法
  const setThemeMode = (mode: ThemeMode) => {
    themeMode.value = mode
    localStorage.setItem('theme-mode', mode)
  }

  const setPrimaryColor = (color: string) => {
    primaryColor.value = color
    localStorage.setItem('primary-color', color)
  }

  const setBorderRadius = (radius: string) => {
    borderRadius.value = radius
    localStorage.setItem('border-radius', radius)
  }

  const setFontSize = (size: string) => {
    fontSize.value = size
    localStorage.setItem('font-size', size)
  }

  const resetTheme = () => {
    setThemeMode('auto')
    setPrimaryColor('#409EFF')
    setBorderRadius('8px')
    setFontSize('16px')
  }

  // 应用主题到DOM
  const applyTheme = () => {
    const root = document.documentElement
    
    if (isDarkMode.value) {
      root.classList.add('dark')
      root.setAttribute('data-theme', 'dark')
    } else {
      root.classList.remove('dark')
      root.setAttribute('data-theme', 'light')
    }

    // 应用CSS变量
    root.style.setProperty('--el-color-primary', primaryColor.value)
    root.style.setProperty('--border-radius', borderRadius.value)
    root.style.setProperty('--font-size', fontSize.value)
  }

  // 监听系统主题变化
  const watchSystemTheme = () => {
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
    
    const handleChange = () => {
      if (themeMode.value === 'auto') {
        applyTheme()
      }
    }

    mediaQuery.addEventListener('change', handleChange)
    
    // 返回清理函数
    return () => {
      mediaQuery.removeEventListener('change', handleChange)
    }
  }

  // 初始化主题
  const initTheme = () => {
    // 从localStorage加载设置
    const savedMode = localStorage.getItem('theme-mode') as ThemeMode
    const savedColor = localStorage.getItem('primary-color')
    const savedRadius = localStorage.getItem('border-radius')
    const savedSize = localStorage.getItem('font-size')

    if (savedMode) themeMode.value = savedMode
    if (savedColor) primaryColor.value = savedColor
    if (savedRadius) borderRadius.value = savedRadius
    if (savedSize) fontSize.value = savedSize

    // 应用主题
    applyTheme()
    
    // 监听系统主题变化
    watchSystemTheme()
  }

  // 监听主题变化
  watch([themeMode, primaryColor, borderRadius, fontSize], () => {
    applyTheme()
  })

  return {
    // 状态
    themeMode,
    primaryColor,
    borderRadius,
    fontSize,
    
    // 计算属性
    isDarkMode,
    currentTheme,
    
    // 方法
    setThemeMode,
    setPrimaryColor,
    setBorderRadius,
    setFontSize,
    resetTheme,
    initTheme,
    applyTheme
  }
})
